<template>
  <div class="main">
    <div class="banner">
      <img src="../../assets/img/banner_bg.png" />
      <div class="banner_title">
        <p>海量用户好价爆料 专业达人商品评测</p>
        <h5>服务全球消费者的购物决策平台</h5>
      </div>
      <div class="banner_info">
        <ul>
          <li>
            <span><b>848</b>万商品</span>
            <p>构建全网商品百科</p>
          </li>
          <li>
            <span><b>20</b>万品牌</span>
            <p>网罗全球品牌动向</p>
          </li>
          <li>
            <span><b>1100</b>万条</span>
            <p>全行业消费信息</p>
          </li>
          <li>
            <span><b>29</b>亿次</span>
            <p>多元化消费决策</p>
          </li>
        </ul>
      </div>
    </div>
    <van-tabs sticky scrollspy>
      <div class="aa">
        <van-tab title="好价">
          <Goodprice></Goodprice>
        </van-tab>

        <van-tab title="社区">
          <Communities></Communities>
        </van-tab>

        <van-tab title="选购指南">
          <ShoppingGuide></ShoppingGuide>
        </van-tab>
      </div>
    </van-tabs>
  </div>
</template>
<script>
import Vue from "vue";
import { Tab, Tabs, Image, Toast } from "vant";
import Goodprice from "../../components/Goodprice";
import Communities from "./communities/Communities";
import ShoppingGuide from "./shoppingguide/ShoppingGuide";
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Image);
Vue.use(Toast);
export default {
  components: {
    Goodprice,
    Communities,
    ShoppingGuide,
  },
  // data() {
  //   return {
  //     style: "tab-class{}",
  //   };
  // },
};
</script>



<style lang="stylus">
.main
  width 100%
  .banner
    width 100%
    height 4rem
    text-align center
    color #fff
    position relative
    img
      transform scale(1, 0.5)
      transform-origin 0 0
    // background-image url('../../assets/img/banner_bg.png')
    // background no-reapt
    .banner_title
      height 1rem
      position absolute
      top 0.4rem
      left 0
      right 0
      bottom 0
      p
        font-size 0.14rem
      h5
        font-weight normal
        font-size 0.2rem
    .banner_info
      position absolute
      left 0
      top 0
      right 0
      bottom 0
      margin auto
      background linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 1))
      border-radius 0.15rem
      width 3.5rem
      height 1.75rem
      ul
        display flex
        flex-wrap wrap
        align-content flex-start
        width 100%
        li
          padding-top 0.15rem
          width 1.75rem
          height 0.75rem
      span
        color #e93938
        font-size 0.12rem
        b
          font-size 0.2rem
      p
        color #484443
        font-size 0.12rem
  .van-tabs__wrap
    display flex
    justify-content center
    align-items center
    // padding-top 0.1rem
  .van-tabbar
    z-index 1000
  .van-tabs
    height 100%
  .van-tabs__line
    bottom 0.09rem
  .van-tabs__nav
    width 100%
  .van-tabs__content
    background-color #eee
    height calc(100% - 0.5rem)
  // overflow-y scroll
  // .van-tabs__content
  // height calc(100% - 0.5rem)
  // .van-tab__pane
  // height 100%
  // overflow-y scroll
  .aa
    padding-top 0.2rem
</style>